<template>
  <div class="history">
    <!-- 顶部栏 -->
    <div class="header">
      <header-cmp>
        <template v-slot:txt>
          <p class="title">历史上的今天</p>
        </template>
        <template v-slot:icon>
          <span class="iconfont icon-fenxiang"></span>
        </template>
      </header-cmp>
      <!-- 时间 -->
      <div class="timer" :style="{}">
        <timer></timer>
      </div>
    </div>





    <!-- 轮播 -->
    <swiper></swiper>

    <!-- 历史今天 -->
    <loading-cmp v-if="isLoading"></loading-cmp>
    <div class="hs_bottom" v-if="!isLoading">
      <ul class="hs_list">
        <li class="hs_list_item" v-for="item in lists" :key="item.id" @click="slcTitle(item.id)">
          <div class="hs_time">{{item.date}}</div>
          <div class="hs_detail">{{item.title}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { get } from "@/https/request";
import { mapState, mapMutations } from "vuex"

import HeaderCmp from '@/components/common/HeaderCmp/HeaderCmp.vue';
import Timer from '@/views/History/Timer.vue'
import Swiper from './Swiper.vue'
import LoadingCmp from '@/components/common/LoadingCmp/LoadingCmp.vue'

export default {
  name: 'HistoryDay',
  components: {
    HeaderCmp,
    Timer,
    Swiper,
    LoadingCmp
  },
  data() {
    return {
      lists: [],
      isLoading: true
    }
  },
  computed: {
    ...mapState(['hs_list'])
  },
  methods: {
    // 调用store中的方法
    ...mapMutations(['setHsList']),
    // 获取历史事件
    inihistory() {
      get(`https://api.oick.cn/lishi/api.php`)
        .then((data) => {
          // console.log(data);
          // console.log(data.result);
          data.result.forEach(element => {
            element.date = element.date.slice(0, 4)
            element.id = Symbol()
          });
          let { result } = data
          // console.log(result);
          // 将历史列表记录到vuex中
          this.$store.commit('setHsList', result)

          let d = setTimeout(() => {
            this.lists = result
            this.isLoading = false
            clearTimeout(d)
          }, 2000)
        })
    },

    // 点击选择
    slcTitle(id){
      // console.log(id);
    }
  },
  created() {
    this.inihistory()
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/iconfont/iconfont.css";

.history {
  .header {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
  }

  .timer {
    background-color: #fff;
    position: fixed;
    top: 80px;
    z-index: 1;
    width: 100%;
  }

  .title {
    color: #fff;
    font-size: 22px;
    margin-left: 10px;
  }

  .iconfont {
    position: relative;
    right: -160px;
  }

  .hs_bottom {
    margin-top: 20px;

    .hs_list {
      .hs_list_item {
        display: flex;
        margin: 10px;

        .hs_time {
          width: 15%;
          padding: 5px;
          font-size: 18px;
          font-weight: 600;
        }

        .hs_detail {
          margin-left: 10px;
          font-size: 18px;
          word-wrap: break-word;
          line-height: 1.5em;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>